<template>
  <div class="form_box">
    <el-form :model="dataForm" :rules="dataFormRules" ref="dataForm" label-width="100px" class="demo-ruleForm">
      <!-- 书名 -->
      <el-form-item label="书名" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>

      <!-- writer -->
      <el-form-item label="作者" prop="writer">
        <el-input v-model="dataForm.writer"></el-input>
      </el-form-item>

      <!-- publisher -->
      <el-form-item label="出版社" prop="publisher">
        <el-input v-model="dataForm.publisher"></el-input>
      </el-form-item>

      <!-- pdate -->
      <el-form-item label="发布日期" prop="pdate">
        <el-input v-model="dataForm.pdate"></el-input>
      </el-form-item>

      <!-- 确认 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm()" :loading="loading">{{submitText}}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import {demoAddApi,demoEditInitApi,demoEditSaveApi} from '@/manager-core/api/demo/demo'



export default defineComponent({
  name: 'FormView',

  components: {
    
  },

  data(){
    return {      
      dataForm : {
        name: '',
        writer: '',
        publisher: '',
        pdate: '',
        id: ''
      },
      dataFormRules: {
        name: [
          {required:true,message: '请输入name',trigger: 'blur'}
        ]
      },

      isEdit : false,
      loading : false      
    }
  },

  methods:{
    init(){

      if(this.isEdit){
        demoEditInitApi(this.dataForm.id)
          .then((r:any)=>{
            this.dataForm = r;
          })
      }

    },

    submitForm(){

      (this.$refs['dataForm'] as any)
      .validate((valid:any)=>{
        if(valid){
          // 验证通过
          console.log("submitForm success")
          this.loading = true;

          if(this.isEdit){
            demoEditSaveApi(this.dataForm)
              .then(()=>{
                  ElMessage.success("修改成功！");
              })
              .finally(()=>{
                this.loading = false;
              })
          }
          else {
            demoAddApi(this.dataForm)
              .then(()=>{
                  ElMessage.success("创建成功！");
              })
              .finally(()=>{
                this.loading = false;
                (this.$refs['dataForm'] as any).resetFields();
              })
          }



        }
        else{
          // 未验证通过
          ElMessage.error("未通过表单验证，请检查表单项");
        }
      })
    }
  },

  computed:{
    submitText(){
      if(this.isEdit){
        return "立即修改"
      }
      else {
        return "立即创建"
      }
    }
  },

  mounted(){
    console.log("muser")
  },

  created(){
    let id  = this.$route.query.id as any;

    if(id){
      this.isEdit = true;
      this.dataForm.id = id;
    }

    this.init();
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
